<div class="layui-fluid" id="VIEW-list-table" lay-title="表格列表">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md10">
            <div class="layui-card">
                <div class="layui-card-body qsadmin-table-full">
                    <div class="layui-btn-container qsadmin-pad-t10 qsadmin-pad-l10">
                        <div class="layui-btn layui-btn-sm">添加商品</div>
                        <div class="layui-btn layui-btn-sm layui-btn-primary table-action" data-type="lower">下架</div>
                        <div class="layui-btn layui-btn-sm layui-btn-primary table-action" data-type="del">删除</div>
                        <div class="layui-btn layui-btn-sm layui-btn-primary table-action" data-type="move">移动分类</div>
                        <div class="layui-btn layui-btn-sm layui-btn-primary table-action" data-type="refresh">刷新页面
                        </div>
                        <div class="layui-btn layui-btn-sm layui-btn-primary action-more">
                            <i class="layui-icon">&#xe875;</i>
                        </div>
                        <div class="layui-btn layui-btn-sm layui-btn-primary">
                            URL信息：
                            <script type="text/html" template>
                                /# JSON.stringify(layui.router()) /#
                            </script>
                        </div>
                    </div>
                    <table id="list-table" lay-filter="list-table"></table>
                </div>
            </div>
        </div>
        <div class="layui-col-md2">
            <div class="layui-card">
                <div class="layui-card-header">筛选数据</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space10 layui-form">
                        <div class="layui-col-md12 layui-col-xs4">
                            <select name="type">
                                <option value="">销售状况</option>
                                <option value="1">出售中</option>
                                <option value="2">已售罄</option>
                                <option value="3">仓库中</option>
                            </select>
                        </div>
                        <div class="layui-col-md12 layui-col-xs4">
                            <select name="status">
                                <option value="">商品类型</option>
                                <option value="1">实物商品</option>
                                <option value="2">虚拟商品</option>
                                <option value="3">电子卡券</option>
                                <option value="4">付费会员卡</option>
                                <option value="5">酒店商品</option>
                            </select>
                        </div>
                        <div class="layui-col-md12 layui-col-xs4">
                            <select name="group">
                                <option value="">商品分组</option>
                                <option value="1">最新商品</option>
                                <option value="2">最热商品</option>
                            </select>
                        </div>
                        <div class="layui-col-md12">
                            <div class="layui-row layui-col-space10">
                                <div class="layui-col-md6 layui-col-xs6">
                                    <input type="text" class="layui-input" placeholder="最高销量"/>
                                </div>
                                <div class="layui-col-md6 layui-col-xs6">
                                    <input type="text" class="layui-input" placeholder="最低销量"/>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md12 layui-col-xs12">
                            <div class="layui-row layui-col-space10">
                                <div class="layui-col-xs6">
                                    <div class="layui-btn layui-btn-sm layui-btn-fluid">筛选</div>
                                </div>
                                <div class="layui-col-xs6">
                                    <div class="layui-btn layui-btn-sm layui-btn-fluid layui-btn-primary">重置</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-card qsadmin-font-12">
                <div class="layui-card-header">
                    <i class="layui-icon">&#xe78c;</i> 帮助中心
                </div>
                <div class="layui-card-extra">
                    <a>进入</a>
                </div>
                <div class="layui-card-body">
                    <p>商品在出售中列表找不到？</p>
                    <p class="qsadmin-c-gray">商品售罄库存为0，在已售罄列表中，提醒您该添加库存了。待付款订单也会占据库存，其超时关闭后库存才会释放。</p>
                    <hr/>
                    <p>
                        <a>如何新建／发布商品？</a>
                    </p>
                    <p>
                        <a>如何管理商品？</a>
                    </p>
                    <p>
                        <a>商品如何排序？</a>
                    </p>
                    <p>
                        <a>商品销量找不到对应的订单？</a>
                    </p>
                    <p>
                        <a>商品二维码使用说明</a>
                    </p>
                    <p>
                        <a>商品可以设置用积分兑换吗？</a>
                    </p>
                </div>
            </div>

        </div>
    </div>
    <script type="text/html" id="TPL-list-table-params1">
        /## layui.each(d.params,function(i,item){ /#
        <span class="layui-badge-rim">/# item.val /#</span>
        /## }) /#
    </script>
    <script type="text/html" id="TPL-list-table-status1">
        /##
        var status = {
        WAIT_PAY:{title:'待付款',color:'blue'},
        WAIT_DELIVER:{title:'待发货',color:'orange'},
        WAIT_REFUND:{title:'待退款',color:'red'},
        }[d.status];
        /#
        <span class="layui-badge layui-bg-/#status.color/#">/# status.title /#</span>
    </script>
</div>
<script>
    layui.use(['admin', 'table', 'form', 'dropdown', 'jquery'], function (admin, table, form, dropdown, $) {
        var view = $('#VIEW-list-table');

        var tableFilter = 'list-table';
        form.render();
        table.render({
            elem: view.find('[lay-filter="' + tableFilter + '"]'),
            api: 'getGoods',
            height: 'full-165',
            cols: [[
                {title: '', type: 'checkbox', fixed: true, width: 60},
                {title: '状态', templet: '#TPL-list-table-status1', width: 80},
                {title: '商品名称', field: 'title', minWidth: 300},
                {title: '商品参数', templet: '#TPL-list-table-params1', minWidth: 240},
                {
                    title: '商品单价',
                    templet: '<p><b class="qsadmin-c-red">￥/#d.price/#</b></p>',
                    align: 'center',
                    width: 90
                },
                {
                    title: '购买数量',
                    templet: '<p><b>/#d.buycount/#</b> <span class="qsadmin-c-gray">件</span></p>',
                    align: 'center',
                    width: 90
                },
                {
                    field: 'time',
                    title: '操作时间',
                    templet: '<p><span title="/#d.time/#" class="qsadmin-c-gray">/# layui.util.timeAgo(d.time)/#</span></p>',
                    align: 'center',
                    width: 170
                }
            ]]
        });


        dropdown.render({
            elem: view.find('.action-more'),
            click: function (name, elem, event) {
                console.log('点击了' + name);
            },
            options: [{
                name: 'action1',
                title: 'Menu 1'
            }, {
                name: 'action2',
                title: 'Menu 2',
                options: [{
                    name: 'action3',
                    title: 'Menu 3',
                }, {
                    name: 'action4',
                    title: 'Menu 4',
                }]
            }]
        });

        view.find('.table-action').click(function () {
            var type = $(this).attr('data-type')
            if (type == 'refresh') {
                //刷新当前页
                layui.view.tab.refresh()

                //刷新一个指定页，不用传入页面的参数
                //layui.view.tab.refresh('/index')

                return false;
            }
            var checkedCount = table.checkStatus(tableFilter).data.length;
            if (checkedCount == 0) {
                layer.msg('请先选择某行');
            } else {
                layer.msg($(this).html() + checkedCount + '项');
            }
        })


    })
</script>